<template>
  <div style="width: 200px">
    <span
      ><a-tree-select
        :v-model:value="value"
        show-search
        style="width: 100%; display: inline-block"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        tree-default-expand-all
        :tree-data="treeData"
      >
        <a-popover title="Title">
          <template #content>
            <p>Content</p>
            <p>Content</p>
          </template>
          <a-button type="primary">Hover me</a-button>
        </a-popover>
      </a-tree-select></span
    >
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
  setup() {
    const value = ref();
    const treeData = ref([
      {
        title: "已通过",
        value: "parent 1",
        children: [
          {
            title: "未通过",
            value: "parent 1-0",
           
          },
        ],
      },
    ]);
    watch(value, () => {
      console.log(value.value);
    });
    return {
      value,
      treeData,
    };
  },
});
</script>

<style>
</style>